<template>
    <div class="homek">
        <div v-for="(item,i) in allBi.slice(0,5)" :key="i" class="main">
            <p>{{item.entity.symbol}} <span style="float: right;"
                    :class="[item.entity.riseAndfall>=0?'greenColor':'redColor']"
                >{{item.entity.riseAndfall*100 | point}}%</span></p>
            <p>
                <span>{{item.entity.close}} &nbsp;&nbsp;&nbsp;&nbsp;</span>
               
            </p>
            <p>24H成交量 &nbsp;&nbsp;&nbsp;{{item.entity.volume}}</p>
            <!-- <div :id="name[i]" style="width: 150px;height:70px;"></div> -->
            <div style="width: 150px;height:20px;"></div>
        </div>
    </div>
</template>
<script>
import echarts from "echarts";
// import {
//     getKlineDataByIntervalTimeForHttp,
//     get24hrDataForAll
// } from "../api/api";
export default {
    data() {
        return {
            dataS: [],
            allBi: [],
            name: ["main1", "main2", "main3", "main4", "main5"]
        };
    },
    created() {
        // this.getAllData();
    },
    mounted() {
        // this.initK();
    },
    methods: {
        //获取所有交易对
        getAllData() {
            get24hrDataForAll().then(res => {
                this.allBi = res.data.data;
                //console.log(this.allBi,987)
                for (var i = 0; i < 5; i++) {
                    this.getData(
                        this.allBi[i].childCoinName,
                        this.allBi[i].motherCoinName,
                        this.name[i]
                    );
                }
                //console.log(this.allBi, 9999);
            });
        },
        
        // 获取data
        getData(child, mather, name) {
            var params = {
                childCoinName: child,
                motherCoinName: mather,
                intervalTime: "1day"
            };
            getKlineDataByIntervalTimeForHttp(params).then(res => {
                //console.log(res.data);
                res.data.data.forEach(item => {
                    this.dataS.push(item.close);
                });
                //console.log(this.dataS);
                this.initK(name);
            });
        },
        initK(name) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(name));
            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    data: this.dataS,
                    show: false
                },
                yAxis: {
                    type: "value",
                    show: false
                },
                series: [
                    {
                        data: this.dataS,
                        type: "line",
                        smooth: true,
                        symbol: "none",
                        lineStyle: {
                            normal: {
                                color: "rgba(103, 222, 120, 1)"
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    },
    filters: {
        point(val) {
            if (val > 0) {
                return "+" + val.toFixed(2);
            } else {
                return val.toFixed(2);
            }
        }
    }
};
</script>

<style lang="less"  scoped>
.redColor {
    color: #eb375d;
}
.greenColor {
    color: #4cdfb0;
}
.homek {
    
    color: #9eb5ca;
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    background-color: #193281;
    display: flex;

    justify-content: space-between;
    .main {
        font-size: 14px;
        margin: 0px 50px;
        p:first-child {
            font-size: 16px;
            font-weight: bold;
            color: #f6f6f6;
            margin-bottom: 15px;
        }
        p:nth-child(2) {
           margin-bottom: 15px;
        }
        p:nth-child(3) {
           font-size: 12px;
        }
    }
}
</style>
